import React from 'react'
import { Button, Input, Form } from 'react-vant'
import { getCode,addCode } from '../../../../../api/verifycode'
import { withRouter } from 'react-router-dom'
const Phone = (props)=>{
  const onFinish =async (values) => {
      let res = await getCode(values)
        if(res.code === 200) {
            await addCode({verifycode:res.verifycode.code,phone:values.phone})
            props.history.push({
              pathname:'/Verifycode',
              state:{
                phone:values.phone,
                code1:'短信登录'
              }
            })
        }else{
          console.log('error');
        }
  }
  const goPass = ()=>{
    props.history.push('/Loginpass')
  }
  return (
    <Form
      style={{ margin: '0' ,width:'100%',height:'100vh',display:'flex',flexDirection:'column',justifyContent:'center',boxSizing:'border-box',padding:'0 20px'}}
      onFinish={onFinish}
      footer={
        <div style={{ margin: '50px 0'}}>
          <Button round nativeType='submit' type='primary' block style={{backgroundColor:'#ff0000',border:'none',fontWeight:'bold',fontSize:'10rem'}}>
            获取验证码
          </Button>
        </div>
      }
    >
      <Form.Item
        name='phone'
        label='请输入手机号'
        rules={[{ pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/, message: '请输入正确的手机号' }]}
      >
        <Input placeholder='请输入手机号' />
      </Form.Item>
      <span onClick={()=>goPass()} style={{fontSize:'5rem',margin:'0 18rem',color:"#006dd2"}}>账号密码登录</span>
    </Form>
  )
}
export default withRouter(Phone)
